import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Breadcrumb, Icon} from 'antd';

import css from './Bread.less';

const {Item} = Breadcrumb;
export default class Bread extends PureComponent {
  static propTypes = {
    location: PropTypes.any,
    menus: PropTypes.any,
  }

  constructor(props) {
    super(props);
    this.state = {};
  }

  _getBreadItems() {
    const { location, menus } = this.props;
    const pathname = this.props.location.pathname;
    const paths = this.props.location.pathname.split('/').filter(item => !!item);
    let currentMenu;
    const breads = [];
    if (menus) {
      currentMenu = this.props.menus.find(v => v.route === pathname);
      for(let i =0; i < paths.length -1; i++){
        const path = paths[i];
        const temp = this.props.menus.find(v => v.route.replace(/^\//, '') === path);
        if (temp) {
          breads.push(<Item key={temp.id}>{temp.name}</Item>);
        }
      }
    }
    if (currentMenu) {
      breads.push(<Item key={currentMenu.id}>{currentMenu.name}</Item>);
    }
    return breads;
  }

  render() {
    const breadItems = this._getBreadItems();
    return (
      <div className={css.bread}>
        <Icon className={css.icon} type="environment-o" />
        <Breadcrumb>
          {breadItems}
        </Breadcrumb>
      </div>
    );
  }

}
